<template>
    <div class="good-item white-bg after-line">
        <div class="clearfix">
            <div class="single-line-left good-image" :style="{'background-image': 'url(' + cover + ')'}"></div>
            <div class="good-info single-line-center-wrapper overflow">
                <div class="large-text">{{name}}</div>
                <div class="clearfix">
                    <span class="large-text primary-color">{{priceText}}</span>
                    <span  v-if="isVip" class="small-text vip-tag">VIP</span>
                    <span class="fr">
                        <Counter v-if="countVisible" :value="count" :min="1" :max="maxCount" @input="onChangeCount"></Counter>
                        <div v-else>
                            <span class="icon">&#xe60c;</span>
                            <span>{{count}}</span>
                        </div>
                    </span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {
    currency,
} from '@/lib/utils';
import Counter from '@/features/product/counter.vue';

export default {
    name: 'GoodItem',
    components: {
        Counter,
    },
    props: {
        cover: {
            type: String,
        },
        name: {
            type: String,
        },
        isVip: {
            type: Boolean,
        },
        /** 数量 */
        count: {
            type: Number,
        },
        /** 最大数量 */
        maxCount: {
            type: Number,
        },
        /** 是否可见 */
        countVisible: {
            type: Boolean,
        },
        /** 价格，单位: 分 */
        price: {
            type: Number,
        },
    },
    computed: {
        priceText() {
            return this.price ? '￥' + currency(this.price) : '';
        },
    },
    methods: {
        /** 数量更新 */
        onChangeCount(count) {
            this.$emit('change', count);
        },
    },
};
</script>

<style lang="less">
@import "../../lib/style/mixins.less";

.good-item {
    position: relative;
    padding: 10px 30rpx;
    .good-image {
        width: 180rpx;
        height: 180rpx;
        background: center no-repeat;
        background-size: cover;
    }
    .good-info {
        padding-left: 30rpx;
        .vip-tag {
            padding: 0rpx 12rpx;
            margin-left: 10rpx;
            color: #000;
            font-size: @text-small-font-size;
            background-color: #FFCA4F;
            border-radius: 8rpx;
        }
    }
}
</style>
